<template>
  <div class="traderIndex-box">
    <Head :title= "title"></Head>
    <div class="traderIndex-top">
      <div class="apply-start">
        <p>成为躺盈交易员</p>
        <p>
          您将有机会被其他用户跟随<br>
          并享有跟投者提供的盈利分成费
        </p>
      </div>
      <div class="apply-reject" v-if="reject">
        <div>
          <img src="../../assets/images/icon-reject.png" alt="">
          <p>申请被驳回</p>
          <p>驳回原因：填写些驳回原因展示在这儿填写的一些驳回原因展示在这儿</p>
        </div>
        <div>
          <p>成为躺盈交易员</p>
          <p>
            您将有机会被其他用户跟随<br>
            并享有跟投者提供的盈利分成费
          </p>
        </div>
      </div>
    </div>
    <div class="traderIndex-center">
      <p class="trader-center-title">
        申请交易员需达到以下基本条件：
      </p>
      <div class="trader-condition">
        <div class="trader-finish">
          <p>● 开通经纪商真实账户</p>
          <!--<p>未完成</p>-->
          <p class="finish-bg"></p>
        </div>
        <div class="trader-finish">
          <p>● 账户入金并连续自主交易30个工作日以上</p>
          <p class="finish-bg"></p>
        </div>
        <div>
          <p>● 近30天收益率大于20%</p>
          <p>未完成</p>
        </div>
        <div>
          <p>● 账户净值不低于$1000</p>
          <p>未完成</p>
        </div>

      </div>
    </div>
    <div class="withdraw-btn">
      <p>立即申请成为交易员</p>

    </div>
  </div>
</template>
<script>
  import Ajax from '@/mixins/ajax';
  import Head from '../../components/header/head.vue'
  export default {
    mixins:[Ajax],
    components:{
      Head
    },
    data(){
      return{
        title:'申请交易员',
        reject:false,
      }
    },
    methods:{

    },
    mounted(){

    }
  }

</script>
<style scoped>
  @import '../../style/withdrawInput.css';
  .traderIndex-box{
    background: #eee;
    min-height: 100%;
  }
  /*申请交易*/
  .apply-start{
    background: url("../../assets/images/start-bg.png") no-repeat center/100% 100% ;
    height:6.78rem;
    padding:1.8rem .53rem 0
  }
  .apply-start p:nth-child(1){
    font-size: .72rem;
    line-height: .9rem;
    color: #fff;
  }
  .apply-start p:nth-child(2){
    font-size: .48rem;
    line-height: .6rem;
    color: #fff;
    margin-top:.6rem;
  }

  /*申请驳回*/
  .apply-reject{
    background: #8e79c0
  }
  .apply-reject div:nth-child(1){
    height: 8.21rem;
    background:url('../../assets/images/reject-bg.png') no-repeat center bottom/100% 1.62rem;
    text-align: center;
    overflow: hidden;
  }
  .apply-reject div:nth-child(1) img{
    width:1.4rem;
    height:1.36rem;
    margin:1.5rem auto .4rem;

  }
  .apply-reject div:nth-child(1) p:nth-child(2){
    font-size: .72rem;
    line-height: .72rem;
    color: #ffffff;
  }
  .apply-reject div:nth-child(1) p:nth-child(3){
    font-size: .48rem;
    line-height: .72rem;
    color: #ffffff;
    margin:.6rem 1.63rem 0;
    text-align: left;
    max-height: 2.8rem;
    overflow: hidden;
  }
  .apply-reject div:nth-child(2){
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 1.78rem;
    background:url('../../assets/images/reject-bg1.png') no-repeat center/100% 100%;
  }
  .apply-reject div:nth-child(2) p:nth-child(1){
    font-size:.72rem;
    line-height:.8rem;
    color: #fff;
  }
  .apply-reject div:nth-child(2) p:nth-child(2){
    font-size: .36rem;
    line-height: .6rem;
    color: #fff;
  }

  /*规则*/
  .traderIndex-center{
    margin-bottom:1.6rem;
  }
  .trader-center-title{
    height: 1.35rem;
    font-size: .42rem;
    line-height: 1.35rem;
    color: #8e79c0;
    padding-left:.53rem;
  }
  .trader-condition{
    background: #fff;
    font-size:.48rem;
    padding:.6rem 0;
  }
  .trader-condition >div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 .53rem;
    height:1.4rem;
    line-height: 1.4rem;
  }
  .trader-condition >div p:nth-child(1){
    color: #999;
  }
  .trader-condition >div p:nth-child(2){
    width: 2rem;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    color: #8e79c0;
  }

  .trader-condition >div.trader-finish p:nth-child(1){
    color: #333;
  }
  .finish-bg{
    width: 2rem;
    height: 1.4rem;
    line-height: 1.4rem;
    background:url('../../assets/images/icon-finish.png') no-repeat center/.45rem .45rem;
  }
</style>

